<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>P259-CSS三角</title>
</head>

<style>
   * {
      padding: 0;
      margin: 0; 
   }

   .box1 { 
       height: 0;
       width: 0;
       /* 为了兼容旧版本浏览器，写上line-height font-size 。新版本与手机不需要 */
       line-height: 0 ;
       font-size: 0 ;
       /* border: 20px solid pink; */
       border-top: 20px solid red ;
       border-right: 20px solid yellow ;
       border-bottom: 20px solid blue ;
       border-left: 20px solid pink ;

       margin: 100px auto;
   }

   .box2 {
       height: 0;
       width: 0;
       /* 为了兼容旧版本浏览器，写上line-height font-size 。新版本与手机不需要 */
       line-height: 0 ;
       font-size: 0 ;
       /* border: 20px solid pink; */
       border-top: 20px solid red ;
       border-right: 20px solid transparent ;
       border-bottom: 20px solid transparent ;
       border-left: 20px solid transparent ;

       margin: auto;
   }


   .box3 {
       height: 0;
       width: 0;
       /* 为了兼容旧版本浏览器，写上line-height font-size 。新版本与手机不需要 */
       line-height: 0 ;
       font-size: 0 ;
       border: 20px solid transparent;
       border-top-color: red ;

       margin: auto;
   }

   .mock {
       position: relative;
       height: 300px;
       width: 200px;
       background-color: pink;
       margin-top: 50px ;
   }
   .mock span {
       position: absolute;
       top: -40px ;
       right: 20px ;

       height: 0;
       width: 0;
       /* 为了兼容旧版本浏览器，写上line-height font-size 。新版本与手机不需要 */
       line-height: 0 ;
       font-size: 0 ;
       border: 20px solid transparent;
       border-bottom-color: red ;
   }
</style>
<body>
    <!-- 菜鸡内心os：做出来后，感觉自己又行了。。。 -->
    <div class="box1"></div> 
    <div class="box2"></div> 
    <div class="box3"></div> 
    <div class="mock">
        <span></span>
    </div>
</body>
</html>